<template>
  <div class="visitsDemo">
    <!-- <div class="tabs">
      <div
        class="tab"
        v-for="(item, index) in tabs"
        :key="index"
        @click="getList(index)"
        :class="{ active: activeTab === index }"
      >
        {{ item.name }}
      </div>
    </div> -->
    <!-- 被攻击服务排行 -->
    <div class="visits-demo" ref="visitsDemo" style="width: 100%; height: 300px"></div>
  </div>
</template>
<script>
import { getDeniedApiCount } from "@/utils/httpUtils";
import * as echarts from "echarts";
export default {
  data() {
    return {
      myChart: null,
      activeTab: 0,
      tabs: [{ name: "近30天访问趋势" }, { name: "24小时访问趋势" }],
    };
  },

  mounted() {
    this.getList();
  },
  methods: {
    getList() {


      // getDeniedApiCount().then((res) => {

      let res = {
        "data": [
          {
            "apiName": "不动产查询接口",
            "latency": 19.32255628032069,
            "usage": 31
          }, {
            "apiName": "不动接口",
            "latency": 19.32255628032069,
            "usage": 3
          }, {
            "apiName": "不动询接口",
            "latency": 19.32255628032069,
            "usage": 25
          },
          {
            "apiName": "不动产查询接口",
            "latency": 19.32255628032069,
            "usage": 9
          }, {
            "apiName": "不动接口",
            "latency": 19.32255628032069,
            "usage": 3
          }, {
            "apiName": "不动询接口",
            "latency": 19.32255628032069,
            "usage": 25
          },
          {
            "apiName": "不动产查询接口",
            "latency": 19.32255628032069,
            "usage": 9
          }
        ],
        "pagination": {
          "page": 1,
          "size": 10,
          "total": 1
        }
      }
      let xData = []
      let yData = []
      res.data.map(function (item) {
        xData.push(item.apiName)
        yData.push(item.usage)
      })

      const chartDom = this.$refs.visitsDemo;
      this.myChart = echarts.init(chartDom);
      const option = {
        color: ["#1890FF"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xData,
            boundaryGap: false,
            axisTick: {
              show: false, // 不显示坐标轴刻度线
            },
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "rgba(230, 247, 255, 0.50)",
              fontSize: 14,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            //y右侧文字
            axisLabel: {
              color: "rgba(230, 247, 255, 0.50)",
              fontSize: 16,
            },
            // y轴的分割线
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgba(230, 247, 255, 0.20)",
              },
            },
          },
        ],
        series: [
          {
            name: "访问次数",
            type: "line",
            smooth: true,
            symbol: "none", // 不显示连接点
            tooltip: {
              trigger: "axis",
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: "line", // 默认为直线，可选为：'line' | 'shadow'
              },
            },
            lineStyle: {
              width: 3,
              shadowColor: "#1890FF",
              shadowBlur: 20,
            },
            areaStyle: {
              opacity: 1,
              //右下左上
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(24, 144, 255, .5)",
                },
                {
                  offset: 0.3,
                  color: "rgba(24, 144, 255, 0.2)",
                },
                {
                  offset: 1,
                  color: "rgba(24, 144, 255, 0)",
                },
              ]),
            },
            data: yData,
          },
        ],
      };
      this.myChart.setOption(option); // 更新图表数据
      // });
    },
  },
};
</script>
<style scoped>
.visitsDemo {
  position: relative;
}

.visitsDemo .tabs {
  position: absolute;
  top: -30px;
  right: 0;
  z-index: 999;
  display: flex;
  color: #fff;
}

.tab {
  cursor: pointer;
  margin-right: 10px;
}

.active {
  color: #198ef8;
  border-bottom: 1px solid #198ef8;
}
</style>
